<template>
  <div class="dashboard-container">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card style="position: relative;">
          <div id="charts-box" class="echarts-container" style="width: 100%;height: 400px;" />
          <el-select
            v-model="profitYear"
            clearable
            placeholder="请选择年份"
            class="charts-profit-select"
            @change="initProfit"
          >
            <el-option label="2022年" value="2022">2022年</el-option>
            <el-option label="2021年" value="2021">2021年</el-option>
            <el-option label="2020年" value="2020">2020年</el-option>
            <el-option label="2019年" value="2019">2019年</el-option>
            <el-option label="2018年" value="2018">2018年</el-option>
          </el-select>
        </el-card>
      </el-col>
      <el-col :span="24" style="margin-top: 10px">
        <el-card style="position: relative;">
          <div id="charts-box2" class="echarts-container" style="width: 600px;height: 400px;" />
          <el-date-picker
            v-model="costMonth"
            type="month"
            value-format="yyyy-MM"
            format="yyyy年MM月"
            placeholder="选择月份"
            class="charts-cost-picker"
            @change="initCost"
          />
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<script>
// import { mapGetters } from 'vuex'
import { getProfitData } from '@/api/myOrder'
import { getCostEchartsData } from '@/api/cost'
import * as echarts from 'echarts'

export default {
  name: 'Dashboard',
  data() {
    return {
      profitData: [],
      profitYear: new Date().getFullYear(),
      costMonth: new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
    }
  },
  mounted() {
    this.initProfit()
    this.initCost()
  },
  methods: {
    initProfit() {
      getProfitData(this.profitYear).then(res => {
        if (res) {
          const mycharts = echarts.init(document.getElementById('charts-box'))
          const option = {
            title: {
              text: '营收走势图',
              left: 'center'
            },
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: res.data.list,
                type: 'line'
              }
            ]
          }
          mycharts.setOption(option)
        }
      })
    },
    initCost() {
      getCostEchartsData(this.costMonth).then(res => {
        if (res) {
          const mycharts1 = echarts.init(document.getElementById('charts-box2'))
          const option1 = {
            title: {
              text: '月支出统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '80%',
                data: res.data.list,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          mycharts1.setOption(option1)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 20px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-card__body{
  display: flex;
  justify-content: center;
}
.charts-profit-select{
  position: absolute;
  right: 143px;
  top: 18px;
}
.charts-cost-picker{
  position: absolute;
  right: 143px;
  top: 18px;
}
</style>
